<template>
  <!-- 添加或修改报销发票信息管理对话框 -->
  <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" append-to-body v-dialogDrag width="80%">
    <el-form :model="form" :rules="rules" label-width="120px" ref="form">
      <el-tabs class="detail-tab" type="card" v-model="activeName">
        <el-tab-pane label="申请信息" name="first">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="报销类型" prop="type">
                <el-select disabled placeholder="请选择报销类型" v-model="form.type">
                  <el-option
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                    v-for="dict in dict.type.reimburse_type"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="报销申请日期" prop="imburseDate">
                <el-date-picker clearable disabled
                                placeholder="请选择报销日期"
                                type="date"
                                v-model="form.imburseDate"
                                value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="请款人名称" prop="qkrmc">
                <el-input placeholder="请输入请款人名称" v-model="form.qkrmc" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="报销金额" prop="imburseMoney">
                <el-input disabled placeholder="金额" style="width: 200px;" v-model="form.imburseMoney"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="请款合计" prop="qkhj">
                <el-input placeholder="请输入请款合计" v-model="form.qkhj" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="已发放金额" prop="remMoney">
                <el-input disabled placeholder="发放金额" style="width: 200px;" v-model="form.remMoney"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="剩余发放金额" prop="remRemain">
                <el-input disabled placeholder="剩余发放金额" style="width: 200px;" v-model="form.remRemain"/>
              </el-form-item>
            </el-col>
            <!--<el-col :span="8" v-if="form.type == '1'">
              <el-form-item label="发票号码" prop="taxNo">
                <el-input placeholder="发票号码" style="width: 200px;" v-model="form.taxNo"/>
              </el-form-item>
            </el-col>-->
            <el-col :span="8">
              <el-form-item label="项目名称" prop="prjname" v-if="form.type == '0'">
                <el-input placeholder="请输入项目名称" v-model="form.prjname" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="请款人开户行" prop="qkrkhh" v-if="form.type == '0'">
                <el-input placeholder="请输入请款人开户行" v-model="form.qkrkhh" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="请款人账号" prop="qkrzh" v-if="form.type == '0'">
                <el-input placeholder="请输入请款人账号" v-model="form.qkrzh" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="资金用途" prop="zjyt" v-if="form.type == '0'">
                <el-input placeholder="请输入资金用途(货款,运费 等)" v-model="form.zjyt" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="请款事由" prop="qksy">
                <el-input placeholder="请输入请款事由" v-model="form.qksy" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="付款备注信息" prop="qkbz">
                <el-input placeholder="请输入付款备注信息(不需备注请填“无”)" type="textarea" v-model="form.qkbz" disabled/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <!-- <el-tabs class="detail-tab" type="card" v-if="newStatus == 2" v-model="activeName">
         <el-tab-pane label="发放信息" name="first">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="发放日期">
                 <el-date-picker
                   placeholder="请选择发放日期"
                   type="date"
                   v-model="form.reimbursementDetail.grantDate"
                   value-format="yyyy-MM-dd">
                 </el-date-picker>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="本次发放金额">
                 <el-input-number :min="0" :precision="2" placeholder="请输入本次发放金额" :max="form.remRemain"
                                  v-model="form.reimbursementDetail.grantMoney"/>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="发放标识">
                 <el-select clearable placeholder="请选择标识" style="width: 300px"
                            v-model="form.reimbursementDetail.companyName">
                   <el-option :key="dict.value"
                              :label="dict.label" :value="dict.value" v-for="dict in dict.type.company"/>
                 </el-select>
                 &lt;!&ndash;                                <el-input v-model="form.companyName" placeholder="请输入发放标识"/>&ndash;&gt;
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="备注" prop="remark">
                 <el-input placeholder="请输入备注" type="textarea" v-model="form.reimbursementDetail.remark"/>
               </el-form-item>
             </el-col>
           </el-row>
         </el-tab-pane>
       </el-tabs>-->
    </el-form>

    <el-tabs class="detail-tab" type="card" v-if="newStatus == 2" v-model="activeName">
      <el-tab-pane label="发放记录" name="first">
        <el-col :span="1.5">
          <el-button @click="handleAddDetail(form)" icon="el-icon-plus" plain size="mini" type="primary" v-if="form.status != '2'">
            新增发放记录
          </el-button>
        </el-col>
        <!-- <goodsReimbursementDetail-list ref="formList" @ok="getDetailList"></goodsReimbursementDetail-list>-->
        <el-table :data="dataList" v-loading="loading">
          <el-table-column align="center" label="发放公司" prop="companyName">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.company" :value="scope.row.companyName"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="发放日期" prop="grantDate">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.grantDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="发放金额" prop="grantMoney"/>
          <el-table-column align="center" label="发放记录" prop="companyId" width="200">
            <template slot-scope="scope">
              <image-preview :src="scope.row.companyId" height="60px" width="40px"></image-preview>
            </template>
          </el-table-column>
          <el-table-column align="center" label="备注" prop="remark"/>
          <el-table-column align="center" class-name="small-padding fixed-width" label="操作"><!-- v-if="form.status != '2'"-->
            <template slot-scope="scope">
              <!--<el-button size="mini" type="text" icon="el-icon-edit"
                      @click="handleUpdate(scope.row)" v-hasPermi="['develop:GoodsReimbursementDetail:edit']">修改</el-button>-->
              <el-popconfirm :title="`确认删除该数据项？`" @confirm="handleDelete(scope.row)"
                             style="margin-left: 10px;">
                <el-button icon="el-icon-delete" size="mini" slot="reference" type="text" v-hasPermi="['develop:GoodsReimbursementDetail:remove']">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-tabs class="detail-tab" type="card" v-model="activeName">
      <el-tab-pane label="报销明细" name="first">
       <!-- <template v-if="form.type != '2'">
          <el-col :span="1.5">
            <el-button @click="handleExportForOrder()" icon="el-icon-download" plain size="mini" type="warning">导出</el-button>
          </el-col>
          <el-table :data="orderList" v-loading="loadingOrderList">
            <el-table-column align="center" label="商品名称" prop="name"/>
            <el-table-column align="center" label="商品品牌" prop="brand"/>
            <el-table-column align="center" label="商品型号" prop="model"/>
            <el-table-column align="center" label="商品单位" prop="unit"/>
            <el-table-column align="center" label="采购单价" prop="costPrice"/>
            <el-table-column align="center" label="采购数量" prop="count"/>
            <el-table-column align="center" label="采购总价" prop="cost"/>
            <el-table-column align="center" label="采购人姓名" prop="buyName"/>
            <el-table-column align="center" label="采购日期" prop="buyDate" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.buyDate, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="采购方式" prop="buyType">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.buy_type" :value="scope.row.buyType"/>
              </template>
            </el-table-column>
          </el-table>
        </template>-->
        <template >
          <el-col :span="1.5">
            <el-button @click="handleExportForFee()" icon="el-icon-download" plain size="mini" type="warning">导出</el-button>
          </el-col>
          <el-table :data="feeList" v-loading="loadingOrderList" :max-height="tableMaxHeight">
            <el-table-column label="费用名称" align="center" prop="name"/>
            <el-table-column label="费用类型" align="center" prop="type">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.fee_type" :value="scope.row.type"/>
              </template>
            </el-table-column>
            <el-table-column label="金额" align="center" prop="money"/>
            <el-table-column label="项目名称" align="center" prop="proName"/>
            <el-table-column label="项目编号" align="center" prop="proNo"/>
            <el-table-column label="归属部门" align="center" prop="deptName"/>
          </el-table>
        </template>
      </el-tab-pane>
    </el-tabs>


    <div class="dialog-footer" slot="footer" v-if="showCheckBtn">
      <el-button @click="submitFormPass('1')" type="primary" v-if="newStatus == 1">审核通过</el-button>
      <el-button @click="submitFormPass('-1')" type="danger" v-if="newStatus == 1">驳 回</el-button>
      <!--      <el-button @click="submitForm" type="primary" v-if="newStatus == 2">发放</el-button>-->
      <el-button @click="cancel">取 消</el-button>
    </div>

    <goodsReimbursementDetail-form @ok="getReset" ref="formDetail"></goodsReimbursementDetail-form>
    <!--    <goods-order-in-list-for-imbursement @ok="updateOrderList" ref="GoodsOrderInListForImbursement"></goods-order-in-list-for-imbursement>-->
  </el-dialog>
</template>

<script>
    import {addAction, deleteAction, downloadFile, getAction, getById, updateAction} from '@/api/manage'
    // import GoodsOrderInListForImbursement from "../../goodsOrderIn/GoodsOrderInListForImbursement";
    import GoodsReimbursementDetailForm
        from '@/views/develop/goodsReimbursementDetail/module/GoodsReimbursementDetailForm'
    import GoodsReimbursementDetailList from '@/views/develop/goodsReimbursementDetail/GoodsReimbursementDetailList'

    export default {
        name: "GoodsReimbursementFormForView",
        dicts: ['buy_type', 'reimburse_type', 'imburse_status', 'yes_no', 'company', 'fee_type'],
        components: {
            // GoodsOrderInListForImbursement,
            GoodsReimbursementDetailForm,
            GoodsReimbursementDetailList
        },
        data() {
            return {
                // 遮罩层
                loading: true,
                loadingOrderList: false,
                activeName: "first",
                // 弹出层标题
                title: "",
                reimburseId: "",
                // 是否显示弹出层
                open: false,
                // 表单参数
                form: {
                    reimbursementDetail: {
                        grantDate: new Date(),
                        status: "0",
                    }
                },
                dataList: [],
                // 表单校验
                rules: {
                    grantMoney: [
                        {required: true, message: "发放金额不能为空", trigger: "blur"}
                    ],
                    companyName: [
                        {required: true, message: "发放乙方不能为空", trigger: "blur"}
                    ],
                },
                url: {
                    list: '/goodsReimbursementDetail/goodsReimbursementDetail/list',
                    remove: '/goodsReimbursementDetail/goodsReimbursementDetail/',
                    getById: '/goodsReimbursement/goodsReimbursement/',
                    add: '/goodsReimbursement/goodsReimbursement/add',
                    edit: '/goodsReimbursement/goodsReimbursement/edit',
                    // addNew: '/goodsReimbursement/goodsReimbursement/addNew',
                    // editNew: '/goodsReimbursement/goodsReimbursement/editNew',
                    // edit0701: '/goodsReimbursement/goodsReimbursement/edit0701',
                },
                queryParams: {
                    reimburseId: null,
                    imburseId: null,
                },
                orderList: [],
                feeList: [],
                orderIds: "",
                newStatus: "",
                showCheckBtn: true,
                tableMaxHeight: window.innerHeight - 320,
            };
        },
        created() {

        },
        methods: {
            handleExportForFee() {
                let that = this;
                that.loading = false;
                that.queryParams.imburseId = that.reimburseId;
                var id = that.reimburseId;
                that.$confirm('是否确认导出报销明细表?', "确认", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    downloadFile('/goodsReimbursement/goodsReimbursement/exportFee', that.queryParams);
                });
            },
            handleExportForOrder() {
                let that = this;
                that.loading = false;
                that.queryParams.imburseId = that.reimburseId;
                var id = that.reimburseId;
                that.$confirm('是否确认导出报销明细表?', "确认", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    downloadFile('/goodsReimbursement/goodsReimbursement/export', that.queryParams);
                    //downloadFile('/goodsReimbursementDetail/goodsReimbursementDetail/exportExcel', id);
                });
            },
            getList() {
                let that = this;
                that.queryParams.reimburseId = that.reimburseId;
                getAction(that.url.list, this.queryParams).then(response => {
                    that.dataList = response.rows;
                    that.total = response.total;
                    that.loading = false;
                });
            },
            /*getDetailList() {
                let that = this;
                // that.$refs.formList.getListByReimburseId(that.reimburseId);
                that.getList();
                that.reset();
                const id = that.reimburseId;
                getById(that.url.getById, id).then(response => {
                    that.form = response.data;
                    that.orderList = that.form.orderList;
                });
            },*/
            getReset() {
                let that = this;
                //  that.$refs.formList.getListByReimburseId(that.reimburseId);
                that.getList();
                that.reset();
                const id = that.reimburseId;
                getById(that.url.getById, id).then(response => {
                    that.form = response.data;
                    that.orderList = that.form.orderList;
                    this.$emit('ok');
                });
            },
            handleDelete(row) {
                const ids = row.id || this.ids;
                deleteAction(this.url.remove, ids).then(response => {
                    this.dataList = this.dataList.filter((item) => {
                        return item.id != row.id
                    });
                    this.$modal.msgSuccess("删除成功");
                    this.getReset();
                }).catch(() => {
                });
            },
            handleAddDetail(reimburse) {
                this.$refs.formDetail.handleAdd(reimburse);
            },
            handleCheckSend(row, status) {
                let that = this;
                that.newStatus = status;
                that.reset();
                that.showCheckBtn = true;
                const id = row.id || that.ids;
                getById(that.url.getById, id).then(response => {
                    let form = response.data;
                    let reimbursementDetail = {
                        grantDate: new Date(),
                        status: "0",
                        grantMoney: form.remRemain
                    }
                    form.reimbursementDetail = reimbursementDetail;
                    that.form = form;
                    // that.form = response.data;
                    that.orderList = that.form.orderList;
                    that.feeList = that.form.feeList;
                    that.open = true;
                    that.title = "查看报销申请信息";
                });
                that.reimburseId = id.toString();
                that.getList();
                //that.$refs.formList.getListByReimburseId(that.reimburseId);
            },
            //打开选择商品弹窗
            /*handleAddOrderList() {
                this.$refs.GoodsOrderInListForImbursement.showSelectOrderList(this.form.type);
            },*/
            //选择商品成功后,将选择的商品放进当前页面的商品列表中
            /*updateOrderList(selectRows) {
                let that = this;
                let orderIds = that.orderIds;
                for (let i = 0; i < selectRows.length; i++) {
                    let row = selectRows[i];
                    if (orderIds.indexOf(row.id) == -1) {
                        orderIds += row.id;
                        that.orderList.push(row);
                    }
                }
                that.form.goodsIds = orderIds;
                that.form.orderList = that.orderList;
                that.submitFormNew();
            },*/
            /*submitFormNew() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.id != null) {
                            updateAction(this.url.editNew, this.form).then(response => {
                                this.$modal.msgSuccess("修改成功");
                                // this.open = false;
                                // this.$emit('ok');
                            });
                        } else {
                            addAction(this.url.addNew, this.form).then(response => {
                                this.$modal.msgSuccess("新增成功");
                                // this.open = false;
                                // this.$emit('ok');
                            });
                        }
                    }
                });
            },*/

            //打开弹窗,用于显示关联的商品列表
            handleAddNewImbursement(type) {
                let that = this;
                that.reset();
                that.open = true;
                that.title = "报销信息管理";
                that.form.type = type;
                that.form.orderList = [];

            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    id: null,
                    type: null,
                    userId: this.$store.getters.userId,
                    userName: this.$store.getters.nickName,
                    imburseDate: new Date(),
                    imburseMoney: null,
                    taxId: null,
                    taxNo: null,
                    taxMoney: null,
                    infomation: null,
                    goodsIds: null,
                    file: null,
                    status: "0",
                    delFlag: null,
                    createBy: null,
                    createTime: null,
                    updateBy: null,
                    updateTime: null,
                    remark: null,
                    remRemain: null,
                    remMoney: null,
                    reimbursementDetail: {
                        grantDate: new Date(),
                        status: "0",
                    }
                };
                this.resetForm("form");
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "添加报销发票信息管理";
            },
            /** 修改按钮操作 */
            handleUpdate(row, shwoBtn) {
                let that = this;
                that.reset();
                that.showCheckBtn = shwoBtn;
                const id = row.id || that.ids;
                getById(that.url.getById, id).then(response => {
                    let data = response.data;
                    that.form = data;
                    that.newStatus = data.status;
                    that.orderList = data.orderList;
                    that.feeList = data.feeList;
                    that.open = true;
                    that.title = "查看报销申请信息";

                    that.reimburseId = id.toString();
                    that.getList();
                });
            },
            /** 提交按钮 */
            /*submitForm() {
                let that = this;
                that.form.status = that.newStatus;
                that.$refs["form"].validate(valid => {
                    if (valid) {
                        if (!that.form.reimbursementDetail.companyName) {
                            that.$modal.msgError("请设置发放标识");
                            return;
                        }
                        if (that.form.id != null) {
                            updateAction(that.url.edit0701, that.form).then(response => {
                                that.$modal.msgSuccess("修改成功");
                                that.open = false;
                                that.$emit('ok');
                            });
                        } else {
                            /!*addAction(that.url.add, that.form).then(response => {
                                that.$modal.msgSuccess("新增成功");
                                that.open = false;
                                that.$emit('ok');
                            });*!/
                        }
                    }
                });
            },*/
            submitFormPass(status) {
                this.form.status = status;
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.id != null) {
                            updateAction(this.url.edit, this.form).then(response => {
                                this.$modal.msgSuccess("修改成功");
                                this.open = false;
                                this.$emit('ok');
                            });
                        }
                    }
                });
            },
        }
    };
</script>
